{% extends "wxweb/site_base.html" %}
{% load static %}
{% load jsonify %}

{% block head-content %}
<title>{{ page_label }}</title>
<script src="{{ js_config.js_lib.jquery }}"></script>
<script src="{{ js_config.js_lib.md5 }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.font_awesome }}">
<script src="{{ js_config.js_lib.vuejs }}"></script>
<script src="{{ js_config.js_lib.nice_validator }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.nice_validator_css }}">

<script src="{{ js_config.js_lib.cube_ui }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.cube_ui_css }}">
<script src="{{ js_config.js_lib.mint_ui }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.mint_ui_css }}">
<script src="{{ js_config.js_lib.vant }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.vant_css }}">

<script src="{{ js_config.js_lib.exfun }}"></script>
<script src="{{ js_config.js_lib.director }}"></script>
<script src="{{ js_config.js_lib.jb_admin }}"></script>
<script src="{{ js_config.js_lib.mobile }}"></script>

{% endblock %}

{% block page_body %}

<script>

    rows={{ rows | jsonify }}
    heads = {{ heads | jsonify }}
    ops = {{ ops | jsonify }}
    page_label = '{{ page_label }}'
//    fields_ctx = {{ fields_ctx | jsonify }}
//    list_panel = {{ list_panel | jsonify }}
    table_editor={{ table_editor | jsonify }}
    table_option = {{ table_option | jsonify }} || {}
    detail_editor= {{ detail_editor | jsonify }}
    detail_ctx = {{ detail_ctx | jsonify }}
    search_args = ex.parseSearch()
    $(function(){
        new Vue({
            el:'#there',
            data:function(){
                var childStore = new Vue(table_store)
                childStore.rows=rows
                childStore.vc = this
                childStore.director_name = director_name
                table_option['nextlevel'] = detail_editor? true:false
                ops.forEach(op=>{
                    op.name = op.label
                })
                return {
                    childStore:childStore,
                    page_label:page_label,
                    search_args:search_args,
                    rows:rows,
                    ops:ops || [],
                    heads:heads,
                    table_editor:table_editor,
                    table_option:table_option,
                    actionVisible:false,
                    scrollOptions: {
                        /* lock x-direction when scrolling horizontally and  vertically at the same time */
                        directionLockThreshold: 0,
                        click:true,
                        pullDownRefresh:{
                            txt:'刷新成功!',
                        },
                        pullUpLoad:{
                            txt:{ more: '', noMore: '没有更多了!' }
                        },

//                        preventDefaultException:{className:/(^van-cell$)/},
//                        preventDefault:false,
                    },
//                    isLoading:false
                }
            },

            methods:{
                open_detail:function(row){
                    if(detail_ctx){
                        detail_ctx.row = row
                        cfg.pop_big( detail_editor,  detail_ctx)
                    }
                },
                onPullingUp(){
                    this.childStore.addNextPage().then(()=>{
                        this.$refs.scroll.forceUpdate()
                    })
                },
                onPullingDown(){
                    this.childStore.search().then(()=>{
                        this.$refs.scroll.forceUpdate()
                    })
                 },
                onClickLeft(){
                    history.back()
                },
                onClickRight(){
                    this.actionVisible = true
                },
                onSelectAction(action){
                    ex.eval(action.action,{ps:this.childStore,})
                    this.actionVisible =false
                }
            }
        })
    })
</script>
<div id="there" class="mobile-list-page">
    <!--<div class="page-title" v-text="page_label"></div>-->
    <van-nav-bar
            :title="page_label"
            :left-arrow="search_args._back"
            @click-right="onClickRight"
            @click-left="onClickLeft">
        <van-icon v-if="ops.length>0" name="bars" slot="right" />
    </van-nav-bar>

    <!--<mt-actionsheet v-if=""-->
            <!--:actions="ops"-->
            <!--v-model="actionVisible">-->
    <!--</mt-actionsheet>-->
    <van-actionsheet
            v-model="actionVisible"
            :actions="ops"
            cancel-text="取消"
            @select="onSelectAction"
    ></van-actionsheet>

    <cube-scroll :data="childStore.rows" ref="scroll"  :options="scrollOptions" @pulling-down="onPullingDown"
                  @pulling-up="onPullingUp">
        <!--<van-pull-refresh v-model="isLoading" @refresh="onRefresh">-->
            <component :is="table_editor" :heads="heads" :rows="childStore.rows" :option="table_option" @select="open_detail($event)"></component>
            <div v-if="childStore.rows.length == 0 " class="center-vh">暂无数据</div>
        <!--</van-pull-refresh>-->
    </cube-scroll>

</div>

{% endblock %}